import React, { PureComponent } from 'react';
import { View, StyleSheet, Image } from 'react-native';
import PropTypes from 'prop-types';
import { DefaultStyles } from '~/styles/GlobalStyles';

const HomeLight = require('../../assets/icon/tab_home_light.png');
const HomeDim = require('../../assets/icon/tab_home_dim.png');
const OrderLight = require('../../assets/icon/tab_order_light.png');
const OrderDim = require('../../assets/icon/tab_order_dim.png');
const UserLight = require('../../assets/icon/tab_user_light.png');
const UserDim = require('../../assets/icon/tab_user_dim.png');
const CustomerLight = require('../../assets/icon/customer-select.png');
const CustomerDim = require('../../assets/icon/customer.png');

const IconList = {
  home: [HomeLight, HomeDim],
  order: [OrderLight, OrderDim],
  user: [UserLight, UserDim],
  customer: [CustomerLight, CustomerDim],
};

export default class TabBarIcon extends PureComponent {
  static propTypes = {
    type: PropTypes.string.isRequired,
    focused: PropTypes.bool.isRequired,
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  render() {
    const { type, focused } = this.props;
    const source = IconList[type][focused ? 0 : 1];

    return (
      <View>
        <Image style={styles.iconActive} source={source} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  iconActive: {
    width: 20,
    height: 20,
  },
});
